import React from 'react';
import AppLayout from '../layout/AppLayout';
import './form.css';

export default function ExperimentManager() {
  const chips = [
    { label: '突触机制', path: '/syn-mechs', closable: true },
    { label: '连接规则', path: '/conn-rules', closable: true },
    { label: '亚细胞连接规则', path: '/subcell-conn-rules', closable: true },
    { label: '反应扩散', path: '/reaction-diffusion-region', closable: true },
    { label: '刺激目标', path: '/stim-targets', closable: true },
    { label: '绘图设置', path: '/plot-settings-raster', closable: true },
    { label: '细胞群体', path: '/populations', closable: true },
    { label: '刺激源', path: '/stim-sources', closable: true },
  ]

  return (
    <AppLayout active="文件" chips={chips}>
      <div style={{ display: 'flex', gap: 24, height: '100%' }}>
        <div style={{ width: 300 }}>
          <h2 style={{ marginTop: 0, marginBottom: 20 }}>实验管理器</h2>
          <button className="btn-circle" style={{ width: 48, height: 48, fontSize: 24, marginBottom: 16 }}>＋</button>
          <div style={{ fontSize: 14, color: '#6b7280', marginLeft: 12 }}>创建新实验</div>
        </div>
        
        <div style={{ flex: 1, background: 'white', borderRadius: 12, padding: 24, minHeight: 400, position: 'relative' }}>
          <span style={{ position: 'absolute', top: 12, right: 12, width: 20, height: 20, background: '#2b8a6e', borderRadius: 4 }}></span>
        </div>
      </div>

      <div style={{ marginTop: 24, background: '#f9fbfc', borderRadius: 12, padding: 16 }}>
        <div style={{ marginBottom: 8, fontWeight: 600 }}>Python</div>
        <div style={{ padding: '12px 16px', background: 'white', borderRadius: 8, fontFamily: 'monospace', minHeight: 100 }}>
          <span style={{ color: '#6b7280' }}>in [ ]:</span>
          <span style={{ marginLeft: 8 }}>|</span>
        </div>
      </div>
    </AppLayout>
  )
}

